<template>
  <a-modal v-model:visible="visible" title="导入关键词" :zIndex="1005" @cancel="onClose">
    <a-form :model="formState" ref="formRef" :label-col="{ span: 4 }">
      <a-form-item
        label="关键词组"
        name="keyWordsGroupId"
        :rules="[{ required: true, message: '请选择关键词组' }]"
      >
        <a-select
          v-model:value="formState.keyWordsGroupId"
          show-search
          placeholder="请选择关键词组"
          style="width: 340px"
          :options="keyWordsGroupList"
          @change="groupSelChange"
          :filter-option="filterOption"
          allowClear
        ></a-select>
      </a-form-item>
      <a-form-item
        label="关键词"
        name="keyWordsId"
        :rules="[{ required: true, message: '请选择关键词' }]"
      >
        <a-spin :spinning="keyWordsSping">
          <a-select
            mode="multiple"
            v-model:value="formState.keyWordsId"
            show-search
            placeholder="请选择关键词"
            style="width: 340px"
            :options="keyWordsList"
            :filter-option="filterOption"
            allowClear
          ></a-select>
        </a-spin>
      </a-form-item>
    </a-form>
    <template #footer>
      <a-button @click="onClose">取消</a-button>
      <a-button type="primary" @click="submit" :loading="loading"
        >确定</a-button
      >
    </template>
  </a-modal>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  computed,
  watch,
  nextTick,
  ref,
  onMounted,
  createVNode,
} from "vue";
import request from "@/common/utils/request";
export default defineComponent({
  components: {},
  props: {
    getText: {
      type: Boolean,
      default: true,
    },
  },
  setup(props, context) {
    const state = reactive({
      visible: false,
      formState: {
        keyWordsGroupId: null, //关键词组id
        keyWordsId: undefined, //关键词id
      },
      keyWordsGroupList: [], //关键词组下拉列表
      loading: false,
      keyWordsSping: false, //关键词下拉框loading
      keyWordsList: [], //关键词下拉列表
    });
    const showModal = () => {
      (state.visible = true), getOptionList();
    };
    const onClose = () => {
      state.visible = false;
      initData();
    };
    // 初始化数据
    const initData = () => {
      state.keyWordsGroupList = [];
      state.keyWordsList = [];
      state.formState.keyWordsId = undefined;
      formRef.value && formRef.value.resetFields();
    };
    // 获取关键词组下拉列表
    const getOptionList = () => {
      request
        .get("/work_ai", "/user/filmrelease/ai/keyword", { pagesize: 0 })
        .then((res) => {
          state.keyWordsGroupList = res.result?.data?.map((item) => {
            return {
              label: item.extraction_word,
              value: item.id,
            };
          });
        });
    };
    const formRef = ref(null); //表单实例

    // 获取关键词下拉列表
    const groupSelChange = () => {
      state.formState.keyWordsId = undefined;
      state.keyWordsList = [];
      if (state.formState.keyWordsGroupId) {
        let params = {
          page: 0,
          ai_keyword_id: state.formState.keyWordsGroupId,
          word: "",
        };
        state.keyWordsSping = true;
        request
          .get("/work_ai", "/user/filmrelease/ai/keywordMerge/list", params)
          .then((successRes) => {
            state.keyWordsList = successRes?.result?.map((ele) => {
              return {
                value: ele.id,
                label: ele.merge_keyword,
              };
            });
            state.keyWordsSping = false;
          })
          .catch((errorRes) => {
            state.keyWordsSping = false;
          });
      }
    };
    // 提交
    const submit = () => {
      formRef.value &&
        formRef.value.validate().then(() => {
          //   let keyWorkd = state.keyWordsList?.find(
          //     (item) => item.value == state.formState.keyWordsId
          //   ).label;
          let keyWorkd = state.keyWordsList
            .filter((ele) => {
              return state.formState.keyWordsId.includes(ele.value);
            })
            .map((i) => i.label);

          console.log(keyWorkd, "关键词组");

          if (props.getText) {
            context.emit("success", keyWorkd.join(","));
          } else {
            context.emit("success", keyWorkd);
          }
          //   return;
          state.visible = false;
          formRef.value && formRef.value.resetFields();
          initData();
        });
    };
    const filterOption = (input, option) => {
      return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    };
    return {
      ...toRefs(state),
      showModal,
      onClose,
      getOptionList,
      submit,
      formRef,
      groupSelChange,
      initData,
      filterOption,
    };
  },
});
</script>

<style lang="less" scoped></style>
